<template>
  <div>
    <div
      class="right-tips not-print"
      ref="tips"
      @click.stop="handleShowNotice"
    >
      <div v-if="iconUrl.isHover" class="tkboy-box">
        <img
          :src="`/static/icon_fest/tkboy_${iconUrl.icon}.png`"
          alt=""
          ref="festIcon"
        />
        <img
          :src="`/static/icon_fest/tkboy_${iconUrl.icon}.gif`"
          alt=""
          ref="festIcon"
        />
      </div>
      <img
        v-else
        :class="iconUrl.icon == 'tkboy' ? 'default-img' : ''"
        :src="`/static/icon_fest/tkboy_${iconUrl.icon}.gif`"
        alt=""
        ref="festIcon"
      />

      <div v-if="tipsLis.show && tipsLis.lis.length == 0" class="socket-tips">
        <div class="right-tips-text act">
          <h2>温馨提示</h2>
          <p>输送调度服务在线，刷新（ctrl+f5）后可使用平台发输送单！</p>
        </div>
      </div>
      <div v-if="!tipsLis.show" class="right-tips-text">
        <h2>温馨提示</h2>
        <p>为了更好的提供输送服务，请准确填写输送设备及起点床位</p>
        <div class="tab-show">
          <a
            href="javascript:void(0)"
            title="隐藏订单状态变化的提示"
            class="btn red-bg"
            v-show="showOrderTips"
            @click.stop="tabShowOrderTips(1)"
          >隐藏订单提示</a>
          <a
            href="javascript:void(0)"
            title="显示订单状态变化的提示"
            class="btn"
            v-show="!showOrderTips"
            @click.stop="tabShowOrderTips(1)"
          >显示订单提示</a>
        </div>
      </div>
      <div class="ekt-badge" v-if="hasNewNotice"></div>
    </div>

    <NoticeNode
      v-show="noticeVisible"
      ref="noticenodes"
      :ks="startAdd"
      @change="handleChangeNotice"
      @close="handleCloseNotice"
    ></NoticeNode>

    <div @click="closeModal" class="modal-bg" v-if="modalShow"></div>
    <div class="state-tips not-print" v-if="showOrderTips && orders.lis.length > 0">
      <div class="state-tips-text">
        <p>
          <b>{{ orders.lis[0].type == "1" ? "输送" : "维修" }}</b>
          编号为{{ orders.lis[0].sn }} 的<b>{{ orders.lis[0].catalog }}</b>
          （{{ orders.lis[0].createdtime }}）订单于{{
            orders.lis[0].changetime
            }}
            由 {{ orders.lis[0].operator }} 变更为
            <b>{{ orders.lis[0].otype }}</b>
        </p>
        <span @click="knowYet(orders.lis[0].id)">已知悉</span>
      </div>
        <div class="state-tips-text" v-if="orders.lis.length > 1">
            <p>
                <b>{{ orders.lis[0].type == "1" ? "输送" : "维修" }}</b
                >编号为{{ orders.lis[1].sn }} 的<b>{{ orders.lis[1].catalog }}</b
            >（{{ orders.lis[1].createdtime }}）订单于{{
                orders.lis[1].changetime
                }}
                由 {{ orders.lis[1].operator }} 变更为
                <b>{{ orders.lis[1].otype }}</b>
            </p>
            <span @click="knowYet(orders.lis[1].id)">已知悉</span>
        </div>
        <div v-if="orders.lis.length > 2" class="state-tips-text state-more">
            <span class="more" @click="showMore">更多</span>
        </div>
        <div
            class="state-tips-text state-more red-bg"
            @click="tabShowOrderTips(0)"
        >
            隐藏订单提示
        </div>
    </div>

    <div class="state-all not-print" v-if="showAll">
      <div class="state-item">
        <div class="state-tips-text" v-for="(item,index) in orders.lis" :key="index">
          <p>
              <b>{{ orders.lis[0].type == "1" ? "输送" : "维修" }}</b>
              编号为{{ item.sn }} 的
              <b>{{ item.catalog }}</b>
              （{{ item.createdtime }}）订单于{{ item.changetime }} 由
              {{ item.operator }}变更为 
              <b>{{ item.otype }}</b>
          </p>
          <span @click="knowYet(item.id)">已知悉</span>
        </div>
      </div>
      <div class="knowAll" @click="knowAll">全部知悉</div>
    </div>
    
  </div>
</template>

<script>
import NoticeNode from "../tips/NoticeNode.vue";
import util from "../common/util";
export default {
  components:{
    NoticeNode
  },
  props:{
    startAdd: Object,
    tipsLis: Object,
    orders: Object,
    notices: Object,
  },
  data(){
    function showOrderTipsFn() {
      let ret = localStorage.getItem("ektShowOrderTips");
      if (ret == "false") {
        return false;
      } else {
        return true;
      }
    }
    return {
      showOrderTips: showOrderTipsFn(),
      iconUrl: { icon: "default", isHover: false }, // 默认右下角泰科仔icon
      //NOTICE
      noticeVisible: false,
      hasNewNotice: false,
      modalShow: false,
      showAll: false,
    }
  },
  watch:{
    notices: {
      handler(n, o) {
        this.handleInitNotice()
      },
      deep: true,
    }
  },
  created(){},
  mounted() {
    var current = new Date().getTime();
    this.iconUrl = util.getFestival(current);
    this.$refs.noticenodes.handleGetLis(this.startAdd);
  },
  methods:{
    //NOTICE
    handleInitNotice(){
      //比较是否为本科室的公告
      if (this.notices.cancel) {
        this.$refs.noticenodes.handleGetLis(this.startAdd);
      } else {
        if (!this.hasNewNotice || this.noticeVisible) {
          this.handleHasNotice(this.notices.notice);
        }
      }
    },
    handleShowNotice() {
      this.noticeVisible = true;
      setTimeout(() => {
        this.$refs.noticenodes.handleGetLis(this.startAdd);
      }, 250);
    },
    handleChangeNotice(s) {
      this.hasNewNotice = s;
    },
    handleCloseNotice() {
      this.noticeVisible = false;
    },
    handleHasNotice(val) {
      if (val.ks.length > 0) {
        this.$refs.noticenodes.handleGetLis(this.startAdd);
      } else {
        this.hasNewNotice = true;
      }
    },
    //
    knowYet(id) {
      for (var i = 0; i < this.orders.lis.length; i++) {
        if (this.orders.lis[i].id == id) {
          this.orders.lis.splice(i, 1);
          break;
        }
      }
      localStorage.setItem("changedOrders", JSON.stringify(this.orders));
      if (this.orders.lis.length == 0) {
        this.closeModal();
      }
    },
    knowAll() {
      this.orders.lis = [];
      localStorage.setItem("changedOrders", "");
      this.closeModal();
    },
    showMore() {
      this.modalShow = true;
      this.showAll = true;
    },
    closeModal() {
      this.modalShow = false;
      this.showAll = false;
    },
    tabShowOrderTips(type) {
      if (type == 1) {
        this.showOrderTips = !this.showOrderTips;
      } else {
        this.showOrderTips = false;
      }
      localStorage.setItem("ektShowOrderTips", this.showOrderTips);
    },
  }
}
</script>

<style lang="less">
@import url('../assets/less/tkboy.less');
</style>